<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>
        $(function () {
            $("#header").load("static/header.html");
            showEmployeeManager();
        });

        // 显示员工列表
        function showEmployeeManager() {
            var table = layui.table;
            table.render({
                elem: '#employeeTable'
                , url: 'emp/getList' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: '员工ID', sort: true, fixed: 'left'}
                    , {field: 'name', title: '姓名'}
                    , {field: 'sex', title: '性别',templet:function (d) {
                            return d.sex == 0 ? "男":"女";
                        },sort:true}
                    , {field: 'age', title: '年龄',sort:true}
                    , {field: 'createTime', title: '创建时间',sort:true}
                    , {field: 'modifiedTime', title: '修改时间',sort:true}
                    ,{title:"操作",toolbar:"#employeeRowBar"}
                ]]
                , request: {
                    pageName: 'pageNum'
                    , limitName: 'limit'
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , countName: 'total' //规定数据总数的字段名称，默认：count
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,
                        "message": res.message, //解析返回信息提示
                        "total": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                ,toolbar: "#employeeBar"
            });
        }

        // 修改按钮
        function showUpdateEmployee(employeeId) {
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '350px'], //宽高
                content: '../static/employeeUpdate.html?employeeId=' + employeeId,
                end: function () {
                    $(".layui-laypage-btn").click()
                }
            })
        }
        // 新增员工按钮
        function showAddEmployee() {
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '350px'], //宽高
                content: '../static/employeeAdd.html',
                end: function () {
                    $(".layui-laypage-btn").click()
                }
            })
        }
    </script>

    <script type="text/html" id="employeeRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit" onclick="showUpdateEmployee({{d.id}})">修改</a>
    </script>

    <script type="text/html" id="employeeBar">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="showAddEmployee()">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </script>
</head>
<body>
<div id="header"></div>
<div style="height: 50px"></div>
<div id="main">
    <div class="layui-tab">
        <ul class="layui-tab-title" >
            <li class="layui-this" onclick="showEmployeeManager()">员工管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table id="employeeTable" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>